<script setup lang="ts">
import { ref } from 'vue';

import { Page } from '@vben/common-ui';

import AMap from '#/components/AMap/index.vue';

const map = ref(null);
const Amap = ref(null);
const cluster = ref(null);
const createMarkerCluster = () => {
  const points = [
    { weight: 8, lnglat: ['116.506647', '39.795337'] },
    { weight: 1, lnglat: ['116.843352', '40.377362'] },
    { weight: 1, lnglat: ['116.637122', '40.324272'] },
    { weight: 1, lnglat: ['116.105381', '39.937183'] },
    { weight: 1, lnglat: ['116.653525', '40.128936'] },
    { weight: 1, lnglat: ['116.486409', '39.921489'] },
    { weight: 1, lnglat: ['116.658603', '39.902486'] },
    { weight: 1, lnglat: ['116.338033', '39.728908'] },
    { weight: 1, lnglat: ['116.235906', '40.218085'] },
    { weight: 1, lnglat: ['116.366794', '39.915309'] },
    { weight: 1, lnglat: ['116.418757', '39.917544'] },
    { weight: 1, lnglat: ['116.139157', '39.735535'] },
    { weight: 1, lnglat: ['116.195445', '39.914601'] },
    { weight: 1, lnglat: ['116.310316', '39.956074'] },
    { weight: 1, lnglat: ['116.286968', '39.863642'] },
  ];
  cluster.value = new Amap.value.MarkerCluster(
    map.value, // 地图实例
    points, // 海量点数据，数据中需包含经纬度信息字段 lnglat
    {
      gridSize: 60, // 数据聚合计算时网格的像素大小
    },
  );
  cluster.value.on('click', (e) => {
    map.value.setCenter(e.lnglat);
    if (e.clusterData.length > 1) {
      map.value.zoomIn();
    }
  });
};
const removeMarkerCluster = () => {
  cluster.value.setMap(null);
};
const mapLoad = () => {
  map.value = new Amap.value.Map('amap-container', {
    // 设置地图容器id
    zoom: 7, // 初始化地图级别
    center: [116.506_647, 39.795_337], // 初始化地图中心点位置
  });
  map.value.addControl(new Amap.value.ToolBar());
  map.value.addControl(new Amap.value.Scale());
  map.value.addControl(new Amap.value.MapType());
  // map.value.addControl(new Amap.value.Geolocation());
  map.value.addControl(new AMap.value.ControlBar());
  createMarkerCluster();
};
</script>
<template>
  <Page auto-content-height>
    <AMap v-model="Amap" @load="mapLoad" />
    <div
      class="rounded-x absolute top-4 h-[400px] w-[215px] bg-white px-3 py-1"
    >
      <el-button type="primary" @click="createMarkerCluster">点聚合</el-button>
      <el-button type="primary" @click="removeMarkerCluster">
        清除点聚合
      </el-button>
    </div>
  </Page>
</template>
